<template>
<div>
    <h1>排房显示</h1>
    <br>
    <a href="/BAdd">新增</a>
    <table class="table">
        <thead>
            <tr>
                <td>房型名称</td>
                <td>房号</td>
                <td>操作</td>
            </tr>
        </thead>

        <tbody>
            <tr v-for="d in data">
                <td>{{d.fangname}}</td>
                <td>{{d.fangH}}</td>
                <td><input type="button" value="修改" @click="Update(d.bid)"></td>
            </tr>
        </tbody>
    </table>

一共{{pagedata.count}}条 每页显示{{pageps.size}}条 一共{{pagedata.listcount}}页 当前第{{pageps.index}}页

<br>
<input type="button" value="首页" @click="fenye(1)">
<input type="button" value="上一页" @click="fenye(2)">

<input type="button" v-for="d in pagedata.listcount" :value="d" @click="shuzi(d)">

<input type="button" value="下一页" @click="fenye(3)">
<input type="button" value="尾页" @click="fenye(4)">

<!--跳转到第几页-->
<input type="number" v-model="pageps.index"><input type="button" value="跳转" @click="tiao">

<select v-model="pageps.size" @click="tiao1">
    <option value="1">1</option>
    <option value="3">3</option>
    <option value="6">6</option>
    <option value="9">9</option>
    <option value="12">12</option>
</select>

</div>

</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router=useRouter()

onMounted(()=>{
    Show()
})

const data=ref([{
     "bid": 1,
      "fangname": "普通房",
      "fangH": "104"
}])


const fenye=(val:any)=>{
    if(val==1){
        pageps.value.index=1
    }
    if(val==2){
        if(pageps.value.index>1){
             pageps.value.index-=1
        }
    }
    if(val==3){
        if(pageps.value.index<pagedata.value.listcount){
            pageps.value.index+=1
        }
    }
    if(val==4){
        pageps.value.index=pagedata.value.listcount
    }
    Show()
}

const shuzi=(val:any)=>{
    pageps.value.index=val
    Show()
}

const tiao=(val:any)=>{
    if(pageps.value.index>0&&pageps.value.index<=pagedata.value.listcount){
        Show()
    }else{
        Show()
    }
}

const tiao1=()=>{
    pageps.value.index=1
    Show()
}


const pageps=ref({
    index:1,
    size:3
})

const pagedata=ref({
    count:0,
    listcount:0
})

const Show=()=>{
    axios.get("/api/BaiFang/BaiShow",{params:pageps.value}).then(res=>{
        data.value=res.data.list;

        pagedata.value.count=res.data.count
        pagedata.value.listcount=Math.ceil(pagedata.value.count/pageps.value.size)
    })
}

const Update=(id:any)=>{
     router.push({path:"/Update",query:{bid:id}})
}
        
</script>

<style lang="scss" scoped>

</style>